<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <!-- 头部开始 -->
                <el-row :gutter="20">
                    <el-col :span="4">
                        <img src="../assets/2132.jpg" />
                    </el-col>
                    <el-col :span="16">
                        <h1>电商管理后台系统</h1>
                    </el-col>
                    <el-col :span="4">
                        <el-dropdown @command="OutUserAdmin">
                            <p class="el-dropdown-link">{{ userData.username }}</p>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :icon="CloseBold">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <!-- 侧边栏 -->
                <el-aside width="200px">
                    <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        :unique-opened="true"
                        :router="true"
                    >
                        <el-sub-menu
                            :index="item.path"
                            v-for="(item, index) in menusData.menuUserdata"
                        >
                            <template #title>
                                <span>{{ item.authName }}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item
                                    :index="val.path"
                                    v-for="(val, key) in item.children"
                                >{{ val.authName }}</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <!-- 路由显示区域 -->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { onBeforeUpdate, onMounted, onUpdated, reactive } from 'vue';
import '../assets/style/commonStyle.css'
import { myaxios } from '../request/index';
import { CloseBold } from '@element-plus/icons-vue'
import router from '../router';
import { ElMessage } from 'element-plus';


//获取数据
var userData = reactive({
    username: JSON.parse(String(localStorage.getItem('userinfo'))).username
})
let menusData: any = reactive({
    menuUserdata: []
})
// console.log();
//退出登录
const OutUserAdmin = () => {
    ElMessage({
        message: '退出成功',
        type: 'success',
    })
    localStorage.removeItem('userinfo')
    router.push({ path: '/login' })
}

//渲染之前
onMounted(async () => {
    const { data } = await myaxios.get('/menus')
    // console.log(data);
    if (data.meta.status == 200) {
        menusData.menuUserdata = data.data
        // console.log(menusData.menuUserdata);
    }
})
</script>

<style>
.el-header {
    background-color: aquamarine;
}
.common-layout{
    width: 100%;
}
.el-aside {
    background-color: rgb(70, 115, 241);
}
.el-main {
    background-color: rgb(251, 133, 255);
}
.el-container {
    height: 550px;
}
.el-row {
    line-height: 50px;
}
.el-row img {
    width: 50px;
    height: 50px;
    border-radius: 25px;
}
.el-col {
    text-align: center;
}
.el-dropdown-link {
    line-height: 50px;
    font-size: 20px;
    color: #333;
}
</style>